<template>
  <div id="table_demo1">
    <el-button type="primary" @click="getAllTableData">获取表格数据</el-button>
    <el-table
        :data="userTableData"
        border
        style="width: 100%">
      <el-table-column
          fixed
          prop="id"
          label="用户ID"
          width="150">
      </el-table-column>
      <el-table-column
          prop="loginId"
          label="用户帐号"
          width="120">
      </el-table-column>
      <el-table-column
          label="用户状态"
          width="120">
        <template slot-scope="scope">
          {{ scope.row.status === '1' ? '正常' : '禁用'}}
        </template>
      </el-table-column>
      <!-- 带文本框的列 -->
    <el-table-column label="文本框" width="180">
      <template slot-scope="scope">
        <el-input
          v-model="scope.row.num1"
          @change="handleInputChange(scope.row)"
          size="small"
        ></el-input>
      </template>
    </el-table-column>
      <!-- 带文本框的列 -->
    <el-table-column label="下拉框" width="180">
      <template slot-scope="scope">
        <el-select v-model="scope.row.num2" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </template>
    </el-table-column>
      <el-table-column
          label="头像"
          width="120">
        <template slot-scope="scope">
          <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.photoPath"
              fit="fill"></el-image>
          <!--<img :src="scope.photoPath" style="width: 100px; height: 100px">-->
        </template>
      </el-table-column>
      <el-table-column
          label="操作"
          width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="sizeList"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
  </div>
</template>

<script>

export default {
  methods: {
    // 查看
    handleClick(row) {
      console.log(row.id);
    },
    async userPage() {
      const {data:res} = await this.$http.post(`/sysusers/page/${this.currentPage}/${this.size}`, this.search_user)
      this.userTableData = res.rows
      this.total = res.total
      console.log(this.userTableData)
    },
    handleSizeChange(val) {
      this.size = val
      this.userPage()
    },
    handleCurrentChange(val) {
     this.currentPage = val
      this.userPage()
    },
    getAllTableData() {
      console.log(111111);
      console.log(this.userTableData)
    }
  },
  created() {
    this.userPage()
  },
  data() {
    return {
      search_user: {},
      currentPage: 1,
      size:3,
      sizeList: [2, 3, 5, 10],
      total: 0,
      userTableData: [],
      options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }]
    }
  }
}
</script>

<style scoped>

</style>
